import 'package:flutter/material.dart';
import 'package:flutter_shopping/models/product.dart';
import 'package:flutter_shopping/pages/detail/components/calculate_counter.dart';
import 'package:flutter_shopping/pages/detail/components/color_with_size.dart';
import 'package:flutter_shopping/utils/colors.dart';
import 'package:flutter_shopping/utils/constants.dart';
import 'package:flutter_shopping/utils/utils.dart';

class ProductDetailBody extends StatelessWidget {
  final Product product;

  const ProductDetailBody({
    super.key,
    required this.product,
  });

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return SingleChildScrollView(
      child: Column(
        children: [
          SizedBox(
            height: size.height,
            child: Stack(
              children: [
                Container(
                  margin: EdgeInsets.only(top: size.height * 0.3),
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(15),
                    ),
                  ),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
                    margin: EdgeInsets.only(top: size.height * 0.1),
                    child: Column(
                      children: [
                        /// 颜色、尺寸
                        const ColorWithSizeView(),

                        /// 描述
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 20),
                          child: Text(
                            product.description!,
                            style: Theme.of(context).textTheme.labelMedium!.copyWith(
                                  color: kTextColor,
                                ),
                          ),
                        ),

                        /// 加减
                        const CalculateCounter(),

                        /// 购物车、下单按钮
                        Container(
                          padding: const EdgeInsets.only(right: kDefaultPadding),
                          margin: const EdgeInsets.only(top: kDefaultPadding),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              /// 购物车
                              IconButton(
                                onPressed: () => print('添加购物车'),
                                style: IconButton.styleFrom(
                                  padding: EdgeInsets.zero,
                                  shape: RoundedRectangleBorder(
                                    side: BorderSide(color: product.color!, width: 1),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                ),
                                icon: Utils.loadSvg(
                                  'add_to_cart',
                                  colorFilter: ColorFilter.mode(
                                    product.color!,
                                    BlendMode.srcIn,
                                  ),
                                ),
                              ),

                              /// 下单按钮
                              SizedBox(width: kDefaultPadding * 0.5),
                              Expanded(
                                child: ElevatedButton(
                                  onPressed: () => print('下单按钮'),
                                  style: ElevatedButton.styleFrom(
                                    padding: EdgeInsets.zero,
                                    backgroundColor: product.color,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(12),
                                    ),
                                  ),
                                  child: Text(
                                    'BUY NOW',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

                /// 顶部
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      /// 标题
                      RichText(
                        text: TextSpan(
                          children: [
                            const TextSpan(
                              text: 'Hand Bag\n',
                              style: TextStyle(
                                fontSize: 13,
                                color: Colors.white,
                              ),
                            ),
                            TextSpan(
                              text: product.title!,
                              style: Theme.of(context).textTheme.headlineLarge!.copyWith(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                            ),
                          ],
                        ),
                      ),

                      /// 垂直间距
                      const SizedBox(height: kDefaultPadding / 2),

                      /// 金额
                      Row(
                        children: [
                          RichText(
                            text: TextSpan(
                              children: [
                                const TextSpan(
                                  text: 'Price\n',
                                  style: TextStyle(
                                    fontSize: 13,
                                    color: Colors.white,
                                  ),
                                ),
                                TextSpan(
                                  text: '\$${product.price!}',
                                  style: Theme.of(context).textTheme.headlineLarge!.copyWith(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                      ),
                                ),
                              ],
                            ),
                          ),

                          /// 商品
                          Expanded(
                            child: Hero(
                              tag: product.id!,
                              child: Utils.loadImage(
                                product.imageName!,
                                fit: BoxFit.fill,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
